<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div slot="header" class="clearfix" v-if="$route.query.id">
          <!-- 面包屑 -->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="search">
          <!-- 搜索区域 -->
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="目录名称" style="margin-right: 10px">
              <el-input v-model="form.directoryName" size="small"></el-input>
            </el-form-item>
            <el-form-item label="状态" style="margin-left: 40px">
              <el-select v-model="form.state" placeholder="请选择" size="small">
                <el-option label="开启" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="reset">清除</el-button>
              <el-button type="primary" @click="onSubmit" size="small">
                搜索
              </el-button>
            </el-form-item>
          </el-form>

          <!-- 新增目录按钮 -->
          <el-form>
            <el-form-item>
              <el-button
                v-if="$route.query.id"
                type="text"
                class="el-icon-back"
                @click="$router.push('/subjects/list')"
                >返回学科</el-button
              >

              <el-button type="success" size="small" @click="add">
                <span class="el-icon-edit"></span>
                新增目录
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 数据记录 -->
        <el-alert
          :title="`数据一共${total}条`"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>

        <!-- 数据列表 -->
        <el-table :data="tableList" style="width: 100%; margin: 15px 0 20px">
          <el-table-column type="index" label="序号" width="180" />
          <el-table-column prop="subjectName" label="所属学科" width="180">
          </el-table-column>
          <el-table-column prop="directoryName" label="目录名称" width="180">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="totals" label="面试题数量"> </el-table-column>
          <el-table-column label="状态">
            <template #default="{ row }">{{ formatState(row.state) }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="changeState(row)">
                {{ row.state === 0 ? '启用' : '禁用' }}
              </el-button>
              <el-button
                type="text"
                :disabled="row.state === 1"
                @click="edit(row)"
              >
                修改
              </el-button>
              <el-button
                type="text"
                :disabled="row.state === 1"
                @click="del(row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="page">
          <el-pagination
            background
            hide-on-single-page
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="form.pagesize"
            layout="prev, pager, next, sizes,jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>

    <!-- 弹框 -->
    <directorys-add
      :show-dialog="showDialog"
      :detail="detail"
      :directorys-id="directorysId"
      @close-dialog="closeDialog"
      @get-directorys-list="getDirectorysList"
    ></directorys-add>
  </div>
</template>

<script>
import { list as getDirectorysListApi, changeState, detail as getDetailApi, remove as delDirectoryApi } from '@/api/hmmm/directorys.js'
import DirectorysAdd from '../components/directorys-add.vue'
export default {
  components: {
    DirectorysAdd
  },
  data () {
    return {
      directorysId: true,
      showDialog: false,
      // 目录表单
      form: {
        directoryName: '',
        state: null,
        page: 1,
        pagesize: 10,
        subjectID: null
      },
      // 列表数据
      tableList: [],
      total: 0,
      detail: {}
    }
  },
  watch: {
    '$route.query.id': {
      immediate: true,
      handler (newVal) {
        // console.log(1)
        if (!newVal) {
          this.form.subjectID = null
          this.getDirectorysList()
        }
      }
    }
  },
  created () {
    this.getDirectorysList()
    this.decideId()
  },
  methods: {
    decideId () {
      this.directorysId = !!this.$route.query.id
    },
    async del (row) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delDirectoryApi(row)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.form.page = 1
        this.getDirectorysList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async edit (row) {
      this.showDialog = true
      const { data } = await getDetailApi(row)
      // console.log(data)
      this.detail = data
    },
    add () {
      this.showDialog = true
    },
    // 关闭弹框
    closeDialog () {
      this.showDialog = false
      this.detail = {}
      if (this.$route.query.id) {
        this.detail.subjectID = this.$route.query.id
      }
    },
    // 切换每页显示条数
    handleSizeChange (val) {
      this.form.pagesize = val
      this.form.page = 1
      this.getDirectorysList()
    },
    // 切换页面
    handleCurrentChange (val) {
      this.form.page = val
      this.getDirectorysList()
    },
    // 改变状态
    async changeState (row) {
      await changeState({ id: row.id, state: `${row.state === 1 ? 0 : 1}` })
      this.$message.success('操作成功')
      this.getDirectorysList()
    },
    // 状态格式化
    formatState (val) {
      const state = {
        1: '已启用',
        0: '已禁用'
      }
      return state[val]
    },
    // 列表
    async getDirectorysList () {
      if (this.$route.query.id) {
        this.form.subjectID = this.$route.query.id
        this.detail.subjectID = this.$route.query.id
      }
      const { data } = await getDirectorysListApi(this.form)
      // console.log(data)
      this.total = data.counts
      this.tableList = data.items
    },
    // 清除
    reset () {
      this.form.state = null
      this.form.directoryName = ''
      // this.form = {
      //   directoryName: '',
      //   state: null,
      //   page: 1,
      //   pagesize: 10,
      //   subjectID: null
      // }
    },
    // 确认筛选
    onSubmit () {
      this.form.page = 1
      this.getDirectorysList()
    }
  }
}
</script>

<style scoped>
.search {
  display: flex;
  justify-content: space-between;
  /* padding-top: 20px; */
}
.page {
  display: flex;
  justify-content: end;
}
</style>
